<!-- 280 create by hxg 2021/12/15  -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{
        $t("common_query")
      }}</a-button>
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="WipByOperationBoxPallet"
      :model="queryForm"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_productType')"
            name="productType"
            prop="productType"
            :rules="{ required: true, message: $t('T9_productType'), trigger: 'change' }"
          >
            <a-select
              v-model:value="queryForm.productType"
              class="select-width"
              @change="changeProductType"
              show-search
            >
              <a-select-option
                v-for="item in productTypeArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_productOwner')"
            name="productOwner"
            prop="productOwner"
            :rules="{ required: true, message: $t('T9_productOwner'), trigger: 'change' }"
          >
            <a-select
              v-model:value="queryForm.productOwner"
              class="select-width"
              show-search
            >
              <a-select-option v-for="item in productOwnerArr" :key="item" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_productId')"
            name="productId"
            prop="productId"
            :rules="{ required: true, message: $t('T9_productId'), trigger: 'change' }"
          >
            <a-select
              v-model:value="queryForm.productId"
              class="select-width"
              show-search
            >
              <a-select-option v-for="item in productIdArr" :key="item" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_grade')"
            name="grade"
            prop="grade"
            :rules="{ required: true, message: $t('T9_grade'), trigger: 'change' }"
          >
            <a-select v-model:value="queryForm.grade" class="select-width" show-search>
              <a-select-option v-for="item in gradeArr" :key="item" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <div class="tableArea" ref="parentArea">
      <div class="left">
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row mt-2"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t("T9_waitingCstList")
          }}</a-col>
        </a-row>
        <t-table align="center"
          :data="table.boxPalletList"
          height="300"
          class="mytable-style"
          :cell-class-name="cellClassName"
        >
          <t-column type="checkbox"></t-column>
          <t-column field="cstId" :title="$t('T9_cstId')" />
          <t-column field="priority" :title="$t('T9_priority')" />
          <t-column field="stayHour" :title="$t('T9_stayHour')" />
          <t-column field="glassQty" :title="$t('T9_glassQty')" />
          <t-column field="productId" :title="$t('T9_productId')" />
          <t-column field="productVer" :title="$t('T9_productVer')" />
          <t-column field="owner" :title="$t('T9_owner')" />
          <t-column field="createUser" :title="$t('T9_createUser')" />
          <t-column field="eqId" :title="$t('T9_eqId')" />
          <t-column field="floor" :title="$t('T9_floor')" />
          <t-column field="fastRunFlag" :title="$t('T9_fastRunFlag')" />
        </t-table>
      </div>
      <div class="center">
        <div>
          <!-- <t-icon type="Twork" /> -->
          <t-icon type="left-circle-fill" :style="{fontSize: '50px', color: '#00a2ff',cursor: pointer}" />
        </div>
        <div>
          <!-- <t-icon type="Twork" /> -->
           <t-icon type="right-circle-fill" :style="{fontSize: '50px', color: '#00a2ff',cursor: pointer}" />
        </div>
      </div>
      <div class="right">
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row mt-2"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t("T9_selectCstList")
          }}</a-col>
        </a-row>
        <t-table align="center"
          :data="table.boxPalletList"
          class="mytable-style"
          height="300"
          :cell-class-name="cellClassName"
        >
          <t-column type="checkbox"></t-column>
          <t-column field="cstId" :title="$t('T9_cstId')" />
          <t-column field="priority" :title="$t('T9_priority')" />
          <t-column field="stayHour" :title="$t('T9_stayHour')" />
          <t-column field="glassQty" :title="$t('T9_glassQty')" />
          <t-column field="productId" :title="$t('T9_productId')" />
          <t-column field="owner" :title="$t('T9_owner')" />
          <t-column field="groupId" :title="$t('T9_groupId')" />
          <t-column field="createUser" :title="$t('T9_createUser')" />
          <t-column field="eqId" :title="$t('T9_eqId')" />
          <t-column field="floor" :title="$t('T9_floor')" />
          <t-column field="fastRunFlag" :title="$t('T9_fastRunFlag')" />
        </t-table>
      </div>
    </div>
    <t-query-form layout="inline" ref="dataForm" :model="dataForm">
      <a-row :gutter="[16, 0]">
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_stbcutBank')"
            name="stbcutBank"
            prop="stbcutBank"
            :rules="{ required: true, message: $t('T9_stbcutBank'), trigger: 'change' }"
          >
            <a-select
              v-model:value="queryForm.stbcutBank"
              class="select-width"
              show-search
            >
              <a-select-option v-for="item in stbcutBankArr" :key="item" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_groupId')"
            name="groupId"
            prop="groupId"
            :rules="{ required: true, message: $t('T9_groupId'), trigger: 'change' }"
          >
            <a-input v-model:value="dataForm.groupId" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-button type="primary">{{ $t("T9_assign") }}</a-button>
          <a-button type="primary" style="margin-left: 20px">{{
            $t("T9_deassign")
          }}</a-button>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_pcQty')" name="pcQty" prop="pcQty">
            <a-input v-model:value="dataForm.pcQty" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_grade')" name="grade" prop="grade">
            <a-input v-model:value="dataForm.grade" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_releasedQty')"
            name="releasedQty"
            prop="releasedQty"
          >
            <a-input v-model:value="dataForm.releasedQty" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_createUser')" name="createUser" prop="createUser">
            <a-input v-model:value="dataForm.createUser" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_destination')"
            name="destination"
            prop="destination"
          >
            <a-input v-model:value="dataForm.destination" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_oldProductVer')"
            name="oldProductVer"
            prop="oldProductVer"
          >
            <a-input v-model:value="dataForm.oldProductVer" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productVer')" name="productVer" prop="productVer">
            <a-input v-model:value="dataForm.productVer" disabled />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <t-query-form layout="inline" ref="dataForm" :model="footForm" class="footQueryForm">
      <a-row :gutter="[16, 0]">
        <a-col :span="24">
          <a-form-item
            :label="$t('T9_comment')"
            name="comment"
            prop="comment"
            :rules="{ required: true, message: $t('T9_comment'), trigger: 'change' }"
          >
            <a-input v-model:value="footForm.comment" />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <div class="footBtn">
      <a-button type="primary">{{ $t("T9_confirm") }}</a-button>
      <a-button type="primary" style="margin-left: 10px">{{ $t("t9_toExcel") }}</a-button>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { getProductType, getProductId, getList } from '@/api/common'

  export default defineComponent({
    name: 'releaseCutBankStb',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        productTypeArr: [],
        productOwnerArr: [],
        table: {
          boxPalletList: [],
          operationList: [],
          boxList: []
        },
        productIdArr: [],
        gradeArr: [],
        stbcutBankArr: [],
        queryForm: {
          productType: '',
          productId: ''
        },
        dataForm: {
          runState: '',
          waitState: '',
          others: ''
        },
        footForm: {
          comment: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getProductType()
    },
    mounted() {
    },
    methods: {
      getProductType() {
        getProductType().then((res) => {
          this.productTypeArr = res
        })
      },
      cellClassName(row) {
        if (row.column.property === 'sumTitle') {
          return 'col-gray'
        }
        return ''
      },
      changeProductType() {
        const params = {
          shopId: 'CELL',
          productType: this.queryForm.productType
        }
        getProductId(params).then((res) => {
          this.productIdArr = res
        })
      },
      getList() {
        const obj = {
          dtoName: 'ViewWipByOperationOperationListDTO',
          processGroupType: 'Box',
          processState: 'Released',
          productId: '',
          productType: this.queryForm.productType,
          productVer: '',
          queryId: 'GetProcessGroupList',
          shopId: 'CELL',
          version: '80018',
          menuName: 'viewWipByOperationBoxPallet',
          usage: 'getOperationList'
        }
        getList(obj).then((res) => {
          this.table.operationList = res.viewWipByOperationOperationListDTOList
          const arr = ['operation', 'ship', 'total']
          arr.forEach((it, index) => {
            this.table.boxPalletList[index].box = res[`${it}Box`]
            this.table.boxPalletList[index].pallet = res[`${it}Pallet`]
            this.table.boxPalletList[index].panel = res[`${it}Panel`]
          })
        })
        const params = {
          dtoName: 'ViewWipByOperationBoxInfoListDTO',
          processGroupType: 'Box',
          processState: 'Released',
          productId: '',
          productType: this.queryForm.productType,
          productVer: '',
          queryId: 'GetProcessGroupList',
          shopId: 'CELL',
          version: '81014',
          route: 'CJ645001',
          operation: '9990',
          menuName: 'viewWipByOperationBoxPallet',
          usage: 'getBoxList'
        }
        getList(params).then((res) => {
          this.table.boxList = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
.tableArea {
  width: 99.9%;
  height: 350px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10px;
  .left {
    width: 46%;
    height: 100%;
  }
  .center {
    width: 4%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .right {
    width: 46%;
    height: 100%;
  }
  /deep/ .global-oper-row {
    border: 100%;
  }
}
.footBtn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
